<template>
    <div class="app-container">
        <div class="head">
            <img src="@/assets/img/Layout/position.png" />
            <p class="see-block">收款单编辑</p>
        </div>
        <div class="view-container">
            <el-row class="status-title">
                <el-col class="mr20 width100">
                    <el-button
                        class="btn-success width100"
                        type="primary"
                        @click="submitForm('save')"
                    >保存</el-button>
                </el-col>
                <el-col class="mr20 width100">
                    <el-button
                        class="btn-success width100"
                        type="primary"
                        @click="submitForm('confirm')"
                    >确认收款</el-button>
                </el-col>
                <el-col :span="12" class="status-container">
                    <div class="status-item">
                        <span class="active">待收款</span>
                        <span>已收款</span>
                        <span>部分核销</span>
                        <span>已核销</span>
                    </div>
                </el-col>
            </el-row>
            <el-form ref="form" :model="form" :rules="rules" label-width="100px" class="mt30">
                <el-row>
                    <el-col :span="9">
                        <el-form-item label="单据编号:" prop="collectionCode">
                            <el-input v-model="form.collectionCode" placeholder="" disabled />
                        </el-form-item>
                    </el-col>
                    <el-col :span="9">
                        <el-form-item label="客户:" prop="customerName">
                            <el-input v-model="form.customerName" placeholder="按名称、手机号、编码模糊检索" style="width:82%;" @input="inputCustomerName" />
                            <ul class="options" v-if="show" >
                                <div class="options-item" v-if="customerNameList.length > 0">
                                    <li @click="check(item)" v-for="item in customerNameList" :key="item.id">
                                        {{ item.name }}
                                    </li>
                                </div>
                            </ul>
                            <el-button type="primary" size="small" class="btn-success" icon="el-icon-search" style="position:absolute;right:0;top:0;bottom:0;width:15%;font-size:14px;" @click="onCustomerList"></el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="9">
                        <el-form-item label="收款方式:" prop="collectionMethod">
                            <el-select v-model="form.collectionMethod" placeholder="请选择" style="width:100%;" @change="onCollectionMethod">
                                <el-option label="银行" value="1">银行</el-option>
                                <el-option label="现金" value="2">现金</el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="9">
                        <el-form-item label="收款类型:" prop="collectionType">
                            <el-select v-model="form.collectionType" placeholder="请选择" style="width:100%;">
                                <el-option label="销售货款" value="1">销售货款</el-option>
                                <el-option label="销售退货" value="2">销售退货</el-option>
                                <el-option label="预收款" value="3">预收款</el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <template v-if="form.collectionMethod == '1'">
                        <el-col :span="9">
                            <el-form-item label="收款银行:" prop="collectionBank">
                                <el-input v-model="form.collectionBank" placeholder="" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="9">
                            <el-form-item label="收款账号:" prop="collectionAccount">
                                <el-input v-model="form.collectionAccount" placeholder="" />
                            </el-form-item>
                        </el-col>
                    </template>
                </el-row>
                <el-row>
                    <el-col :span="9">
                        <el-form-item label="金额（元）:" prop="money">
                            <el-input v-model="form.money" placeholder="" @blur="inputMoney" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="9">
                        <el-form-item label="金额大写:" prop="amountOfCapital">
                            <el-input v-model="form.amountOfCapital" placeholder="" disabled />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="9">
                        <el-form-item label="备注:" prop="remark">
                            <el-input v-model="form.remark" placeholder="" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <!-- 客户列表 -->
        <el-dialog :visible.sync="customerShow" width="800px" top="100px" append-to-body center>
            <el-radio-group v-model="customerType" @change="onCustomerType" class="customer-type">
                <el-radio label="1">企业客户</el-radio>
                <el-radio label="2">会员客户</el-radio>
            </el-radio-group>
            <template v-if="customerType == '1'">
                <el-form :model="queryCustomer" ref="queryCustomer" :inline="true" @submit.native.prevent>
                    <el-form-item label="客户姓名" prop="searchValue">
                        <el-input
                            v-model="queryCustomer.searchValue"
                            placeholder="请输入客户名称检索"
                            clearable
                            size="small"
                            @keyup.enter.native="handleQuery"
                        />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" class="list-search btn-success" color="#5ED4D4">搜索</el-button>
                        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery" class="list-search">重置</el-button>
                    </el-form-item>
                </el-form>
                <el-table :data="customerShowList" @row-click="handleCustomer">
                    <el-table-column label="序号" type="index" align="center" width="50">
                        <template slot-scope="scope">
                            <span>{{(queryCustomer.pageNum - 1) * queryCustomer.pageSize + scope.$index + 1}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="编号" align="center" prop="code" />
                    <el-table-column label="名称" align="center" prop="name" />
                </el-table>
                <pagination
                    v-show="total > 0"
                    :total="total"
                    :page.sync="queryCustomer.pageNum"
                    :limit.sync="queryCustomer.pageSize"
                    @pagination="getCustomerList()"
                />
            </template>
            <template v-else>
                <el-form :model="queryParams" ref="queryForm" :inline="true" @submit.native.prevent>
                    <el-form-item label="手机号" prop="phone">
                        <el-input
                            v-model="queryParams.phone"
                            placeholder="会员手机号检索"
                            size="small"
                            maxlength="11"
                            @keyup.enter.native="handleQuery"
                        />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" class="list-search btn-success" color="#5ED4D4">搜索</el-button>
                        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery" class="list-search">重置</el-button>
                    </el-form-item>
                </el-form>
                <el-table :data="customerShowList" @row-click="handleCustomer">
                    <el-table-column label="序号" type="index" align="center" width="50">
                        <template slot-scope="scope">
                            <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="手机号" align="center" prop="phone" />
                    <el-table-column label="呢称" align="center" prop="nickName" />
                </el-table>
                <pagination
                    v-show="total > 0"
                    :total="total"
                    :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getCustomerList()"
                />
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { billsReceiptUpdate, billsReceiptDetail, billsReceiptCustomerData } from "@/api/system/billsReceipt/billsReceipt"
import { listUser } from "@/api/system/basicdata/basicdata"
import { memberList } from "@/api/system/member/member"
export default {
    name: "add",
    data() {
        return {
            form: {
                collectionId: '', // 收款id
                collectionCode: '', // 单据编号
                customerId: '', // 客户id
                customerName: '', // 客户
                collectionMethod: '1', // 收款方式
                collectionType: '1', // 收款类型
                collectionBank: '', // 收款银行
                collectionAccount: '', // 收款账号
                money: '', // 金额
                amountOfCapital: '', // 金额大写
                remark: '', // 备注
            },
            // 表单校验
            rules: {
                customerName: [
                    { required: true, message: "客户不能为空", trigger: "blur" }
                ],
                collectionType: [
                    { required: true, message: "收款类型不能为空", trigger: "blur" }
                ],
                money: [
                    { required: true, message: "金额不能为空", trigger: "blur" }
                ]
            },
            customerNameList: [],
            show: false,
            customerShow: false,
            customerType: '1',
            customerShowList: [],
            total: 0,
            queryCustomer: {
                pageNum: 1,
                pageSize: 10,
                status: 1,
                approvalStatus: 2,
                checkStatus: 1,
                searchValue: undefined
            },
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                status: 2,
                phone: undefined
            },
        }
    },
    created() {
        this.getDetail()
    },
    methods: {
        // 获取详细信息
        getDetail(){
            billsReceiptDetail(this.$route.query.id).then(res => {
                if(res.code == 200){
                    this.form = res.data
                }
            })
        },
        // 按名称模糊检索
        inputCustomerName(val){
            if(val !== ''){
                this.show = true
                // 查询客户列表
                billsReceiptCustomerData({ searchValue: val }).then(res => {
                    if(res.code == 200){
                        this.customerNameList = res.data
                    }
                })
            }else{
                this.show = false
            }
        },
        // 选中客户
        check(item) {
            this.form.customerId = item.customerId
            this.form.customerName = item.name + item.phone
            this.show = false
        },
        // 客户列表弹窗
        onCustomerList(){
            this.show = false
            this.customerShow = true
            this.customerType = '1'
            this.resetForm("queryCustomer")
            this.resetForm("queryForm")
            this.getCustomerList()
        },
        // 客户列表数据
        getCustomerList(){
            if(this.customerType == '1'){
                listUser(this.addDateRange(this.queryCustomer)).then(res => {
                    this.customerShowList = res.rows
                    this.total = res.total
                })
            }else{
                memberList(this.addDateRange(this.queryParams)).then(res => {
                    this.customerShowList = res.rows
                    this.total = res.total
                })
            }
        },
        // 切换客户类型
        onCustomerType(val){
            if(val == '1'){
                listUser(this.addDateRange(this.queryCustomer)).then(res => {
                    this.customerShowList = res.rows
                    this.total = res.total
                })
            }else{
                memberList(this.addDateRange(this.queryParams)).then(res => {
                    this.customerShowList = res.rows
                    this.total = res.total
                })
            }
        },
        // 搜索按钮
        handleQuery() {
            if(this.customerType == '1'){
                this.queryCustomer.pageNum = 1
            }else{
                this.queryParams.pageNum = 1
            }
            this.getCustomerList()
        },
        // 重置按钮
        resetQuery() {
            if(this.customerType == '1'){
                this.resetForm("queryCustomer")
            }else{
                this.resetForm("queryForm")
            }
            this.handleQuery()
        },
        // 选中客户
        handleCustomer(row){
            this.customerShow = false
            if(this.customerType == '1'){
                this.form.customerName = row.name
                this.form.customerId = row.id
            }else{
                this.form.customerName = row.nickName + row.phone
                this.form.customerId = row.memberInformationId
            }
        },
        // 收款方式
        onCollectionMethod(){
            this.form.collectionBank = ''
            this.form.collectionAccount = ''
        },
        // 金额验证
        inputMoney(e){
            if(/^(([1-9]{1}\d*)|(0{1}))((.\d{0,2})?)$/.test(e.target.value) == false){
                this.$modal.msgError('请输入正确的金额！')
                this.form.money = ''
                this.form.amountOfCapital = ''
                return false
            }else{
                if(e.target.value == '0'){
                    this.$modal.msgError('金额必须大于0!')
                    this.form.money = ''
                    this.form.amountOfCapital = ''
                }else{
                    // 金额转换大写
                    this.form.amountOfCapital = this.numberToChinese(e.target.value)
                }
            }
        },
        // 按钮
        submitForm(e){
            if(e == 'save'){
                let arr = this.form
                arr.status = '1'
                billsReceiptUpdate(arr).then(res => {
                    if(res.code == 200){
                        this.$modal.msgSuccess("保存成功")
                        this.getDetail()
                    }
                })
            }else{
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        if(this.form.customerId == ''){
                            this.$modal.msgError('请选择正确的客户信息!')
                        }else{
                            let arr = this.form
                            arr.status = '2'
                            billsReceiptUpdate(arr).then(res => {
                                if(res.code == 200){
                                    this.$modal.msgSuccess("操作成功")
                                    this.$tab.closeOpenPage({ path: "/billsReceipt/list" })
                                }
                            })
                        }
                    }
                })
            }
        }
    }
}
</script>

<style scoped>
.options {
    position: absolute;
    z-index:10;
    left:0;
    width: 82%;
}
.options li {
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    border: 1px solid #DCDFE6;
    border-top: 0px;
    text-indent: 12px;
    overflow: hidden;
}
.options li:hover {
    background: #f3f5f9;
    color: #606266;
}
.options-item{
    background:#fff;
    overflow-y:scroll;
    max-height: 200px;
}
.customer-type{
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 25px;
}
</style>